<template>
	<view class="card">
		<view class="title flex align-center justify-between">
			<view>
				失效产品共
				<text class="u-primary">{{ list.length }}</text>
				件
			</view>
			<view class="delete flex align-center u-primary" @click="banchDel('0')">
				<image :src="`${assetsPath}/deleteCart.png`" mode="widthFix" class="img"></image>
				清空失效产品
			</view>
		</view>
		<view class="flex align-center c-item" v-for="(item, index) in list">
			<view class="tag">失效</view>
			<view class="flex-sub ml24"><goods-item :state="0" :info="item" :imgWidth="imgWidth" :imgheight="imgWidth" :showFav="false" pd="0" mt="0"></goods-item></view>
		</view>
	</view>
</template>

<script>
import mycheckbox from '@/components/mycheckbox';
import goodsItem from '@/components/goods-item';
export default {
	data() {
		return {
			imgWidth: uni.upx2px(160) + 'px'
		};
	},
	components: { mycheckbox, goodsItem },
	props: {
		list: {
			type: Array,
			default: () => []
		},
		invalidCart: {
			type: Number,
			default: 0
		}
	},
	methods: {
		banchDel() {
			this.$emit('banchDel', 0);
		}
	}
};
</script>

<style lang="scss">
.c-item {
	padding: 24upx;
}
.title {
	padding: 24upx;
	font-size: 26upx;
	color: #1c1c1e;
	.delete {
		image {
			width: 28upx;
			height: 28upx;
		}
	}
}

.tag {
	width: 60upx;
	height: 30upx;
	background: #aeaeb2;
	border-radius: 4upx;
	text-align: center;
	color: #fff;
	font-size: 20upx;
}
</style>
